<template>
  <div class="shouye">
    <Head @judge="judge1"></Head>
    <div class="Section">
      <div class="NavBar">
        <TabBar msg="/shouye" @judge0="judge3"></TabBar>
      </div>
      <div v-if="judge2 == 0" class="Section-right">
        <div class="Section-rightTop">
          <div class="divNavbar">
            <mt-navbar v-model="selected" class="mt-navbar">
              <mt-tab-item id="1" class="mt-tab-item">已报项目</mt-tab-item>
              <mt-tab-item id="2" class="mt-tab-item">退回项目</mt-tab-item>
            </mt-navbar>
          </div>
          <div class="from">
            <div class="Input">
              <!-- <input type="text" placeholder="综合查询" /> -->
              <el-input
                v-model="query_words"
                size="mini"
                style="border: none"
                icon="el-icon-search"
                placeholder="综合查询"
                class="Input_box"
                prefix-icon="el-icon-search"
                @change="top_query()"
              />
            </div>
            <div class="Button">
              <el-button
                style="
                  height: 25px;
                  font-size: 12px;
                  box-sizing: border-box;
                  padding-bottom: 10px;
                  background-color: rgb(129, 191, 232);
                  border: 0;
                "
                type="primary"
                icon="el-icon-plus"
                size="mini"
                round
                @click="toFrom"
                >新增</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-edit-outline"
                size="mini"
                round
                style="
                  height: 25px;
                  font-size: 12px;
                  box-sizing: border-box;
                  padding-bottom: 10px;
                  background-color: rgb(129, 191, 232);
                  border: 0;
                "
                >导出</el-button
              >
            </div>
          </div>
        </div>
        <div class="Section-rightBottom">
          <mt-tab-container class="mt-tab-container" v-model="selected">
            <mt-tab-container-item class="mt-tab-container-item" id="1">
              <div class="ButtonTwo">
                <p>筛选：</p>
                <el-button type="primary" size="mini" class="ButtonClick" round
                  >五年规划项目</el-button
                >
                <el-button type="success" size="mini" class="ButtonClick" round
                  >政府投资项目(50万以上)</el-button
                >
                <el-button type="info" size="mini" class="ButtonClick" round
                  >政府投资项目(50万以下)</el-button
                >
                <el-button type="primary" size="mini" class="ButtonClick" round
                  >企业投资项目</el-button
                >
                <el-button type="primary" size="mini" class="ButtonClick" round
                  >信息化项目</el-button
                >
              </div>
              <div class="Section-rightBottom-Table">
                <div id="jiHua">
                  <el-table
                    :data="
                      tableData.filter(
                        (data) =>
                          !query_words ||
                          data.name
                            .toLowerCase()
                            .includes(query_words.toLowerCase())
                      )
                    "
                    style="width: 100%"
                  >
                    <el-table-column prop="name" label="项目名称" width="180">
                    </el-table-column>
                    <el-table-column prop="date" label="项目年度" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="项目期限">
                    </el-table-column>
                    <el-table-column prop="address1" label="项目类别">
                    </el-table-column>
                    <el-table-column prop="address2" label="建设地址">
                    </el-table-column>
                    <el-table-column prop="address3" label="实施单位">
                    </el-table-column>
                    <el-table-column prop="address4" label="状态">
                      <!-- slot-scope="scope" -->
                      <template>
                        <el-button
                          v-if="(status = 1)"
                          type="warning"
                          round
                          size="mini"
                          >审核中</el-button
                        >
                        <el-button
                          v-else-if="(status = 2)"
                          type="primary"
                          round
                          size="mini"
                          >通过</el-button
                        >
                        <el-button v-else type="success" round size="mini"
                          >未通过</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="address5" label="详细信息">
                      <template>
                        <el-button type="primary" round size="mini"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="Pagination">
                  <el-pagination
                    background
                    :total="tableData.length"
                    :page-size="pagesize"
                    pager-count="5"
                    :current-page="currentPage1"
                    @current-change="handleCurrentChange"
                    layout="total,prev, pager, next, jumper"
                  >
                  </el-pagination>
                </div>
              </div>
            </mt-tab-container-item>
            <mt-tab-container-item class="mt-tab-container-item" id="2">
              <div class="Section-rightBottom-Table">
                <div id="jiHua">
                  <el-table
                    :data="
                      tableData.filter(
                        (data) =>
                          !word ||
                          data.name.toLowerCase().includes(word.toLowerCase())
                      )
                    "
                    style="width: 100%"
                  >
                    <el-table-column prop="name" label="项目名称" width="180">
                    </el-table-column>
                    <el-table-column prop="date" label="项目年度" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="项目期限">
                    </el-table-column>
                    <el-table-column prop="address1" label="项目类别">
                    </el-table-column>
                    <el-table-column prop="address2" label="建设地址">
                    </el-table-column>
                    <el-table-column prop="address3" label="实施单位">
                    </el-table-column>
                    <el-table-column prop="address4" label="状态">
                      <!-- slot-scope="scope" -->
                      <template>
                        <el-button
                          v-if="(status == 1)"
                          type="warning"
                          round
                          size="mini"
                          >审核中</el-button
                        >
                        <el-button
                          v-else-if="(status == 2)"
                          type="primary"
                          round
                          size="mini"
                          >通过</el-button
                        >
                        <el-button v-else type="success" round size="mini"
                          >未通过</el-button
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="address5" label="详细信息">
                      <template>
                        <el-button type="primary" round size="mini"
                          >查看</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </div>

                <div class="Pagination">
                  <el-pagination
                    background
                    :total="tableData.length"
                    :page-size="pagesize"
                    pager-count="5"
                    :current-page="currentPage1"
                    layout="total,prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                     :page-sizes="[8, 16, 24, 32]"
                  >
                  </el-pagination>
                </div>
              </div>
            </mt-tab-container-item>
          </mt-tab-container>
        </div>
      </div>
      <router-view v-else></router-view>
    </div>
    <div v-show="isShow" class="Xinzeng">
      <Xinzeng></Xinzeng>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import TabBar from "../components/TabBar";
import Xinzeng from "../components/Xinzeng";
import Head from "../components/head";
import { Navbar, TabItem } from "mint-ui";
// import { getlist } from "../api/index";

Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
  name: "Shouye",
  components: {
    TabBar,
    Xinzeng,
    Head,
  },
  data() {
    return {
      judge2: 0,
      selected: "1",
      isShow: false,
      word: "",
      proType: 1,
      
      query_words: "",
      queryMap: { pageNum: 1, pageSize: 8 },
      status: "",
      total: 0,
      currentPage1:"",
      tableData: [
        {
          name: "杭州",
          date: "2016.5.2",
          address: "测试",
          address1: "实施类",
          address2: "建德市",
          address3: "建德市xxx",
        },
        {
          name: "建德市xxx",
          date: "2016.5.2",
          address: "测试",
          address1: "实施类",
          address2: "建德市",
          address3: "建德市xxx",
        },
      ],
    };
  },
  created() {
    // this.demo();
    this.search();
    // this.judge1()
    
  },
  methods: {
    //綜合查詢
    top_query() {
      let param = {
        page: this.queryMap.pageNum,
        pageSize: this.queryMap.pageSize,
      };
      param.proType = this.proType;
      param.status = this.status;
      param.word = this.query_words;
      this.$post("/proInquire/planDec/query", param).then((res) => {
        this.tableData = res.data.rows;
        this.total = res.data.total;
      });
    },
    
    /**
         * 通知信息改变页码
         */
        handleSizeChange(newSize) {
            this.queryMap.pageSize = newSize;
            this.loadTableData();
        },
        /**
         * 通知信息点击分页
         */
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            this.search();
            // this.loadTableData();
        },
    // handleCurrentChange(val) {
    //   this.currentPage = val;
   search() {
     console.log("=========>");
            let param = {
                page: this.queryMap.pageNum,
                pageSize: this.queryMap.pageSize
            };
            param.proType = this.proType;
            param.status = this.status;
            param.word = '';
            this.$post('/proInquire/planDec/query', param).then((res) => {
                this.tableData = res.data.rows;
                this.total = res.data.total;
            });
        },
    
    // demo() {
    //   console.log(333);
    //   // this.judge2 = 0
    //   getlist().then((res) => {
    //     console.log(res);
    //   });
    // },

    judge1(data) {
      console.log(data);
      this.judge2 = data;
      console.log(this.judge2);
    },
    judge3(data) {
      console.log(data);
      this.judge2 = data;
      console.log("-------------------------");
      console.log(this.judge2);
    },
    toFrom() {
      this.isShow = !this.isShow;
    },
  },
};
</script>
<style lang="less" scoped>
.shouye {
  width: 100%;
  height: 100%;
  background-image: url("../assets/shouyeImage/bj.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 15px 50px 15px;
  .Header {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3 {
      color: white;
      line-height: 70px;
    }
    .Header-right {
      display: flex;
      align-items: center;
      width: 7%;
      .imageOne {
        width: 35px;
        height: 35px;
        background-color: rgb(92, 169, 211);
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 25px;
          height: 20px;
        }
      }
      .ImageTwo {
        width: 70%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        line-height: 70px;
        p {
          font-size: 12px;
          margin: 0 7px 0px 7px;
          color: white;
        }
        img:nth-child(1) {
          width: 24px;
          height: 24px;
        }
        img:nth-child(3) {
          width: 7px;
          height: 4px;
        }
      }
    }
  }
  .Section {
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    .NavBar {
      width: 5.5%;
      height: 90%;
      box-sizing: border-box;
      padding-top: 5px;
    }
    .Section-right {
      width: 93.5%;
      height: 100%;
      background-color: rgb(252, 247, 247);
      box-sizing: border-box;
      padding: 5px;
      border-radius: 10px;
      .Section-rightTop {
        width: 100%;
        height: 40px;
        background-color: rgb(148, 201, 216);
        border-radius: 10px 10px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0px 10px 0px 10px;
        .divNavbar {
          width: 20%;
          height: 100%;
          .mt-navbar {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            .mt-tab-item {
              width: 50%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: white;
              font-size: 14px;
              line-height: 40px;
            }
          }
        }
        .from {
          display: flex;
          align-items: center;
          .Input {
            width: 230px;
            height: 25px;
            background-color: white;
            border-radius: 13px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            input {
              width: 87%;
              height: 100%;
              border: none;
              border-radius: 13px;
              box-sizing: border-box;
              padding-left: 10px;
              text-align: center;
              outline: none;
            }
            span {
              margin-top: 2px;
            }
          }
          .Button {
            margin-left: 20px;
            line-height: 37px;
          }
        }
      }
      .Section-rightBottom {
        width: 100%;
        height: 93%;

        .mt-tab-container {
          width: 100%;
          height: 100%;
          .mt-tab-container-item {
            width: 100%;
            height: 100%;
            .ButtonTwo {
              display: flex;
              align-items: center;
              width: 100%;
              height: 35px;
              font-size: 12px;
              box-sizing: border-box;
              padding-left: 10px;
              border-bottom: 1px solid black;
              p {
                font-size: 12px;
                line-height: 35px;
              }
              .ButtonClick {
                height: 20px;
                font-size: 10px;
                -webkit-transform-origin-x: 0;
                -webkit-transform: scale(0.9);
                line-height: 6px;
                background-color: rgb(148, 201, 216);
                border: none;
                margin: 0;
              }
            }
            .Section-rightBottom-Table {
              width: 100%;
              height: 600px;
              table {
                width: 100%;
                height: 90%;
                background-color: white;
                border-collapse: collapse;
                border: 1px solid rgb(199, 198, 198);
                border-top: none;
                tr {
                  width: 100%;
                  border-bottom: 1px dashed black;
                  font-size: 12px;
                  height: 28px;
                  th {
                    border: none;
                    color: rgb(139, 139, 139);
                    font-weight: 300;
                    height: 30px;
                  }
                  td {
                    border: none;
                    text-align: center;
                    height: 30px;
                    .zhuangtai {
                      .el-button {
                        height: 15px;
                        font-size: 10px;
                        -webkit-transform-origin-x: 0;
                        -webkit-transform: scale(0.9);
                        padding: 0.5px 2px 0px 2px;
                        margin: 0;
                      }
                    }
                  }
                }
                tr:last-child {
                  border-bottom: none;
                }
              }
              .Pagination {
                width: 100%;
                height: 30px;
                text-align: center;
                margin-top: 10px;
              }
            }
          }
        }
      }
    }
  }
}
.Xinzeng {
  width: 92%;
  position: absolute;
  right: 15px;
  top: 70px;
}
.mint-navbar .mint-tab-item.is-selected {
  background-color: rgb(205, 133, 17) !important;
}
/deep/.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  display: inline;
}
// /deep/.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon .el-icon-arrow-right{
//   line-height: 30px;
// }
// /deep/.el-pagination .btn-next .el-icon, .el-pagination .btn-prev .el-icon{
//   display: inline;
// }
/deep/ .btn-prev .el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
  display: inline;
}
#jiHua {
  width: 100%;
  height: 93.5%;
  /deep/.el-table th {
    text-align: center;
  }
  /deep/.el-table td {
    text-align: center;
    border-bottom: 1px dashed #ebeef5;
  }
  /deep/.el-table th.is-leaf {
    border-bottom: 2px solid #ebeef5;
  }
  .el-button--warning {
    background-color: #dd7d7d;
  }
  .el-button--primary {
    background-color: #5ca9d3;
  }
  .el-button--success {
    background-color: #bebebe;
  }
  .el-pagination {
    position: absolute;
    right: 685px;
    bottom: 105px;
  }
}
/deep/.el-tabs--border-card {
  background-color: rgb(252, 247, 247);
  border-radius: 10px;
}
/deep/.el-table th {
  background-color: white !important;
  font-size: 12px !important;
}
/deep/.cell {
  font-size: 14px !important;
}
</style>
